<!--租赁设备详情-->
<template>
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="cancel"
  >
    <el-form
      ref="addForm"
      class="dialog-form"
      :model="formData"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备名称" prop="name">
            <span class="detail-info">{{ formData.name }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备编号" prop="equipmentNum">
            <span class="detail-info">{{ formData.equipmentNum }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备类型" prop="equipmenType">
            <treeselect
              v-model="formData.equipmenType"
              disabled
              size="medium"
              :normalizer="normalizer"
              :options="equipOption"
              placeholder=""
              no-options-text="暂无数据"
              :clearable="false"
              clear-value-text=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备型号" prop="equipmentModel">
            <span class="detail-info">{{ formData.equipmentModel }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="licensePlate">
            <label slot="label" v-html="`设备状态`" />
            <span class="detail-info">{{ formData.status }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属项目" prop="orgCreditCode">
            <span class="detail-info">{{ formData.orgCreditCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属企业/人员" prop="manufacturer">
            <span class="detail-info">{{ formData.manufacturer }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { detailEquipment } from '@/api/system/equipment'
export default {
  name: 'DetailDialog',
  components: {
    Treeselect
  },
  props: {
    equipOption: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      normalizer(node) {
      // 去掉children=null的属性
        if (node.children === null) {
          delete node.children
          return {
            id: node.typeNum,
            label: node.typeName
          }
        } else {
          return {
            id: node.typeNum,
            label: node.typeName,
            children: node.children
          }
        }
      },
      /* 详情 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      formData: {
        name: '', // 设备名称
        equipmentNum: '', // 设备编号
        equipmenType: undefined, // 设备类型
        equipmentModel: '', // 设备型号
        licensePlate: '', // 车牌号
        orgCreditCode: '', // 信用代码
        manufacturer: '' // 生产厂家
      }
      /* 详情 end*/
    }
  },
  methods: {
    /* 详情弹层 start*/
    // 从父组件获取参数的方法
    handleAdd(title, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      if (id) {
        this.getDetailById(id)
      }
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailEquipment(id)
      this.formData = { ...data }
    },
    // 关闭
    cancel() {
      this.dialogVisible = false
    }
    /* 详情弹层 end*/
  }
}
</script>

